<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
</head>
<body>
<span th:fragment="main">
    <div class="attribute-tab w-100 d-none" id="attribute-tab-8">
        <div class="jqueryui-tabs">
            <ul>
                <li><a id="attributeResolutionTab" href="#attributeresolution-tab">Attribute Resolution</a></li>
                <li><a class="hide" id="attributeDefinitionsTab" href="#attributedefinitions-tab">Attribute Definitions</a></li>
                <li><a class="hide" id="attributeRepositoriesTab" href="#attributerepositories-tab">Attribute Repositories</a></li>
            </ul>
            <div id="attributeresolution-tab">
                 <p>You can examine person attributes from the CAS attribute repositories.</p>
                <form id="fmPersonDirectory" class="d-block" onsubmit="return false;">
                    <section class="cas-field form-group my-3 mdc-input-group d-flex">
                        <div class="mdc-input-group-field mdc-input-group-field-append w-100">
                            <label for="personUsername"
                                   class="mdc-text-field mdc-text-field--outlined control-label mdc-text-field--with-trailing-icon mb-2">
                                <span class="mdc-notched-outline">
                                    <span class="mdc-notched-outline__leading"></span>
                                    <span class="mdc-notched-outline__notch">
                                        <span class="mdc-floating-label">Username</span>
                                    </span>
                                    <span class="mdc-notched-outline__trailing"></span>
                                </span>
                                <input class="mdc-text-field__input form-control" type="text"
                                       name="personUsername" data-param-name="username" tabindex="0"
                                       id="personUsername" size="50" autocomplete="off" required/>
                            </label>
                        </div>

                    </section>
                    <div class="d-flex">
                        <button type="button" name="personDirectoryButton" id="personDirectoryButton" class="mdc-button mdc-button--raised">
                            <span class="mdc-button__label"><i class="mdc-tab__icon mdi mdi-check-all" aria-hidden="true"></i>Verify</span>
                        </button>
                        <button type="button" name="personDirectoryClearButton" id="personDirectoryClearButton" class="mdc-button mdc-button--raised">
                            <span class="mdc-button__label"><i class="mdc-tab__icon mdi mdi-delete" aria-hidden="true"></i>Delete Cache</span>
                        </button>
                    </div>
                </form>

                <table id="personDirectoryTable" class="mdc-data-table__table table table-striped noborder">
                    <thead>
                    <tr class="mdc-data-table__header-row">
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Value(s)</th>
                    </tr>
                    </thead>
                    <tbody class="mdc-data-table__content">
                    </tbody>
                </table>
             </div>


            <div id="attributedefinitions-tab">
                <p>
                    You can examine attribute definitions registered with CAS.
                    An attribute definition allows one to describe metadata about necessary attributes
                    with special decorations to be considered during attribute resolution and release.
                </p>
                <table id="attributeDefinitionsTable" class="mdc-data-table__table table table-striped noborder">
                    <thead>
                    <tr class="mdc-data-table__header-row">
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Key</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Name</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Scoped</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Encrypted</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Single Value</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Pattern Format</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Canonicalization</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Flattened</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Friendly Name</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">URN</th>
                    </tr>
                    </thead>
                    <tbody class="mdc-data-table__content">
                    </tbody>
                </table>
            </div>


            <div id="attributerepositories-tab">
                <p>
                    You can examine attribute repositories registered with CAS that are responsible for fetching attributes for users.
                </p>
                <table id="attributeRepositoriesTable" class="mdc-data-table__table table table-striped noborder">
                    <thead>
                    <tr class="mdc-data-table__header-row">
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">ID</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Order</th>
                        <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Tags</th>
                    </tr>
                    </thead>
                    <tbody class="mdc-data-table__content">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</span>
</body>
</html>
